<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>폼 객체</title>
<style type="text/css">
	#iframeContainer {
		position: absolute;
		left: 100px;
		top: 100px;
		width: 200px;
		height: 300px;
		border: 5px solid gray;
		z-index: 1;
	}
	.hidden {
		display: none;
	}
	iframe {
		border: none;
	}
</style>
<script type="text/javascript">
	// 폼을 조작하는 컨트롤 객체
	var formCtrl = {
			opneZip: function(){
				var iframe = document.getElementById('zipcodeIfrmae');
				iframe.src = '9-4.html';
				document.getElementById('iframeContainer').className = '';
			},
			closeZip: function(){
				var iframe = document.getElementById('zipcodeIfrmae');
				iframe.src = 'about:blank';
				document.getElementById('iframeContainer').className = 'hidden';
			},
			toggleZip: function(){
				var container = document.getElementById('iframeContainer');
				var className = container.className;
				if (className === 'hidden') {
					this.opneZip();
				} else {
					this.closeZip();
				}
			},
			setZipcode: function(zipcode){
				document.forms['shoesForm'].zipcode.value = zipcode;
				this.closeZip();
			}
	};
</script>
</head>
<body>
	<form name="shoesForm">
		우편번호
		<input type="text" name="zipcode" readonly="readonly" />
		<button type="button" onclick="formCtrl.toggleZip();">우편번호 검색</button>
	</form>
	<div id="iframeContainer" class="hidden">
		<iframe id="zipcodeIfrmae" src="about:blank" width="100%" height="100%">
		</iframe>
	</div>
</body>
</html>
